<template>
  <div class="app" >
    <div class="bg" :style="{ backgroundImage: `url(${getBg})` }"></div>
    <!-- <transition name="fade-up">
      <router-view />
    </transition> -->
    <router-view v-slot="{ Component }">
      <transition name="fade-up">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>

</template>

<script setup lang="ts">
import { computed, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { useWindowStore } from '@/store/window'
import loginBg from '@/assets/img/bg/login_bg.webp'
import homeBg from '@/assets/img/bg/home_bg.webp'

const windowStore = useWindowStore()
const route = useRoute()
const getBg = computed(() => {
  // return ''
  if (route.path === '/login' || route.path === '/') {
    return loginBg
  } else {
    return homeBg
  }
})

//获取整个窗口的宽高
const windowHW = reactive({
  h: document.documentElement.clientHeight,
  w: document.documentElement.clientWidth
})
windowStore.h = windowHW.h
windowStore.w = windowHW.w

// 监听窗口变化
window.onresize = () => {
  windowHW.h = document.documentElement.clientHeight
  windowHW.w = document.documentElement.clientWidth
  windowStore.h = windowHW.h
  windowStore.w = windowHW.w
}

</script>

<style scoped lang="less">
.app {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
  place-items: center;

  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    z-index: -1000;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    transition: all 1s ease-in-out;
  }

}
</style>
